<template>
  <div class="album-detail" @click.self="$emit('close')">
    <div class="content">
      <div class="close" @click="$emit('close')">X</div>
      <div class="cover">
        <img :src="album.cover" />
      </div>
      <div class="name">
        唱片名称:{{album.album}}
        <br />
        歌手名称:{{album.singer}}
      </div>
      <!-- $event 内部抛出事件的数据 -->
      <star-box
        :star="album.star"
        @change="$emit('change',$event)"
       />
      <div class="info">
        {{album.info}}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      //Object或者Array类型的props默认值必须是方法
      album:{
        type:Object,
        default(){
          return {}
        }
      }
    },
     mounted(){
      //this是AlbumDetail组件的实例
      //this.$parent 是父组件的实例
      //this.$paren.$parent 是父组件的父组件的实例(爷爷组件)
      //this.$children是所有的子组件的实例组成的数组
      //this.$children[0].$children[0]
      // this.$parent.list[0].star=5
      // this.$parent.list[1].star=0
      // this.$parent.list[2].star=0

    }
  }
</script>

<style lang="sass" scoped>
.album-detail
  position: fixed
  top: 0
  right: 0
  bottom: 0
  left: 0
  background: rgb(0,0,0,.8)
  overflow: scroll
  .content
    position: relative
    overflow: hidden
    margin: 10% auto
    max-width: 500px
    background: #fff
    border-radius: 5px
    padding: 30px
    .cover
      margin: -30px -30px 20px
      img
        width: 100%
        height: auto
  .close
    position: absolute
    right: 30px
    top: 30px
    width: 40px
    line-height: 40px
    border-radius: 50%
    background: #fff
    text-align: center
    color: #000
    font-size: 30px
    cursor: pointer
</style>
